<template>
  <el-select
    style="width: 100%"
    class="mgb10"
    v-model="city"
    filterable
    remote
    reserve-keyword
    placeholder="请输入详细地址"
    :remote-method="inputChange"
    @change="cityChange"
  >
    <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.name" />
  </el-select>
  <div id="container" />
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'

const map = ref<any>(null)

const autocomplete = ref<any>(null)
const geocoder = ref<any>(null)
const marker = ref<any>(null)
const cityOptions = ref()
const city = ref()

const initGdMap = () => {
  AMapLoader.load({
    key: 'b35df9d20b58759faa0f4fbe90ac71e1', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.ControlBar',
      'AMap.ToolBar', //比例尺，显示当前地图中心的比例尺
      'AMap.Scale', //工具条，控制地图的缩放、平移等
      'AMap.HawkEye', //鹰眼，显示缩略图
      'AMap.MapType',
      'AMap.AutoComplete',
      'AMap.Geocoder',
      'AMap.Marker'
    ]
  })
    .then((AMap) => {
      map.value = new AMap.Map('container', {
        // center: [116.397428, 39.90923], //设置地图中心点坐标
        zoom: 16, //设置地图显示的缩放级别
        // mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        viewMode: '3D', //设置地图模式
        dragEnable: true, //禁止鼠标拖拽
        scrollWheel: true, //鼠标滚轮放大缩小
        doubleClickZoom: true, //双击放大缩小
        keyboardEnable: true, //键盘控制放大缩小移动旋转
        resizeEnable: true
      })
      map.value.setDefaultCursor('pointer') //使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
      map.value.addControl(
        new AMap.ControlBar({
          position: {
            top: '5px',
            right: '5px'
          }
        })
      )
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      map.value.addControl(
        new AMap.ToolBar({
          position: {
            top: '100px',
            right: '34px'
          }
        })
      )
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.value.addControl(new AMap.Scale())

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      map.value.addControl(new AMap.HawkEye({ isOpen: true }))

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.value.addControl(
        new AMap.MapType({
          position: {
            top: '10px',
            left: '100px'
          }
        })
      )
      // 标记点
      marker.value = new AMap.Marker()
      // 输入提示插件
      autocomplete.value = new AMap.AutoComplete({
        city: '全国'
      })
      // 正向地理编码
      geocoder.value = new AMap.Geocoder()
    })
    .catch((e) => {
      console.log(e)
    })
}

// 搜索位置
const inputChange = (e: string) => {
  autocomplete.value.search(e, function (status: any, result: any) {
    if (status === 'complete' && result.info === 'OK') {
      // 搜索成功时，result即是对应的匹配数据
      cityOptions.value = result.tips
    }
  })
}
const cityChange = (address: string) => {
  geocoder.value.getLocation(address, function (status: any, result: any) {
    if (status === 'complete' && result.info === 'OK') {
      // result中对应详细地理坐标信息
      const lnglat = result.geocodes[0].location
      marker.value.setPosition(lnglat)
      map.value.add(marker.value)
      map.value.setFitView(marker.value)
    }
  })
}

onMounted(() => {
  initGdMap()
})
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
